<template>
  <div class="live-box">
    <div class="header">
      <div class="anchor">
        <div class="avator"></div>
        <div class="info">
          <span style="font-size: 12px">房间名称:{{ roomName }}</span>
          <span style="font-size: 10px">{{ anchorNickname }} ID:{{ anchorId }}</span>
          <span class="tag"></span>
        </div>
      </div>
      <div class="item">
        <span class="value">{{ popularity }}</span>
        <span class="label">人气值</span>
      </div>
      <div class="item">
        <span class="value">{{ liveDuration }}</span>
        <span class="label">开播时长</span>
      </div>
      <div class="item">
        <span class="value">{{ power }}</span>
        <span class="label">实力值</span>
      </div>
      <div class="fun_btn">
        <div class="btn" @click="startBroadcast">开 播</div>
        <div class="btn" @click="stopBroadcast">退 出</div>
      </div>
    </div>
    <div class="middle">
      <div class="tag-bar">
        <span class="tag"></span>
        <span>
          距离
          <span class="gradient">未来之星</span>
          还差
          <span class="gradient">35</span>
          颗守护水晶
        </span>
        &nbsp; / &nbsp;
        <span style="color: #a8e6ff; cursor: pointer" @click="guardianAnchorRef.show()">
          去守护&nbsp;&nbsp;&gt;
        </span>
      </div>
      <div class="btns">
        <div class="btn" @click="openIncome">直播收益</div>
        <img class="item cursor_btn" src="@/assets/live/room/gift.png" @click="isGiftRankingShow = true" />
        <img class="item cursor_btn" src="@/assets/live/room/setting.png" @click="isDailyShow = true" />
        <img class="item cursor_btn" src="@/assets/live/room/houseRank.png" @click="isRoomRankingShow = true" />
      </div>
      <Income ref="incomeRef" />
    </div>
    <el-badge :value="2" :show-zero="false" :max="99" class="collect_packet">
      <div class="collect_packet_div" @click="collectPacket">
        <img src="@/assets/live/redPacket.png" alt="" />
      </div>
    </el-badge>
    <div :class="{
      footer: true,
      'footer-zero': microphoneCount === 0,
      'footer-eight': microphoneCount === 8,
      'footer-twelve': microphoneCount === 12,
    }">
      <div v-for="i in microphoneCount" class="item">
        <el-tooltip effect="lightgray" placement="bottom" :offset="50" trigger="click">
          <div class="icon">
            <img :src="sofaIcon" style="width: 24px" />
          </div>
          <template #content>
            <div class="more-box">
              <li @click="openSetMicrophone(i)">设置名称</li>
              <li style="height: 1px; background-color: #fff"></li>
              <li>设置背景</li>
            </div>
          </template>
        </el-tooltip>
        <div class="label">{{ i }}号麦</div>
      </div>
      <SetMicrophoneName ref="setMicrophoneNameRef" />
      <div v-if="microphoneCount === 0" class="anchor">
        <div class="icon">
          <img :src="sofaIcon" style="width: 28px" />
        </div>
        <div class="label">主播昵称</div>
      </div>
    </div>
    <Music></Music>
  </div>
  <!-- <button @click="toSay">上麦</button>
  <button @click="leaveSay">下麦</button> -->
  <el-button type="primary" @click="toSay">上麦</el-button>
  <el-button type="primary" @click="leaveSay">下麦</el-button>
  <DailyTask v-model="isDailyShow" />
  <GiftRanking v-model="isGiftRankingShow" />
  <RoomRanking v-model="isRoomRankingShow" />
  <GuardianAnchor ref="guardianAnchorRef" />
  <CollectPacket v-model="isCollectPacketShow" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import sofaIcon from "@/assets/live/sofa.svg";
import Income from "./Income.vue";
import DailyTask from "./dialog/DailyTask.vue";
import GiftRanking from "./dialog/GiftRanking.vue";
import RoomRanking from "./dialog/RoomRanking.vue";
import SetMicrophoneName from "./SetMicrophoneName.vue";
import GuardianAnchor from "./GuardianAnchor.vue";
import CollectPacket from "./dialog/CollectPacket.vue";
import Music from "./dialog/Music.vue";
const roomName = ref("房间名称"); // 房间名称
const anchorNickname = ref("主播昵称"); // 主播昵称
const anchorId = ref("123456"); // 主播ID
const popularity = ref("-"); // 人气值
const liveDuration = ref("10:00:00"); // 直播时长
const power = ref("-"); // 实力值
const isDailyShow = ref(false);
const isGiftRankingShow = ref(false);
const isRoomRankingShow = ref(false);
const { microphoneCount } = inject("microphone");
const guardianAnchorRef = ref();
const isCollectPacketShow = ref(false);
// 直播收益相关逻辑
const incomeRef = ref();
const openIncome = () => {
  incomeRef.value.show();
};
// 设置麦位名称
const setMicrophoneNameRef = ref();
const openSetMicrophone = (i: Number) => {
  setMicrophoneNameRef.value.show(`${i}号麦`);
};
const collectPacket = () => {
  isCollectPacketShow.value = true;
};
// =============
import { startLive, endLive } from "@/agroa";
import { loginIm } from "@/IM/loginIm";
const iM = loginIm();
// import useAgoraRTC from "@/hooks/useAgoraRTC";
// const { initClient, setClientRole, joinChannel, publishStream, leaveChannel } = useAgoraRTC();
// import useVoiceChat from "@/hooks/useVoiceChat";
// const {
//   initialize,
//   startMic,
//   startSystemAudio,
//   join,
//   leave,
//   stopMic,
//   stopSystemAudio,
//   requestToHost,
//   leaveStage,
// } = useVoiceChat();
// 开播
const startBroadcast = async () => {
  try {
    // await initClient();
    // await setClientRole("host");
    // await joinChannel();
    // await publishStream();
    // await initialize({
    //   appId: "4487c53bb8a548508ffe17fceb321334",
    //   token:
    //     "007eJxTYBA/FH3zhU2TKGfY+SNlfOKb2xUED/n2b2CY9SUmeVHSh/0KDCYmFubJpsZJSRaJpiYWpgYWaWmphuZpyalJxkaGxsYmlp//pjcEMjK4n3vLwsgAgSA+J0NZfmZyalB+fi4DAwDOtCHf",
    //   channel: "voiceRoom",
    //   uid: "56988",
    //   role: "audience",
    // });
    // await join();
    await startLive();
    // await iM.login();
  } catch (error) {
    console.log(error);
  }
};
// 上麦
const toSay = async () => {
  // await requestToHost();
  // await startMic();
  // await startSystemAudio();
};
const leaveSay = async () => {
  // await leaveStage();
};
// 关播
const stopBroadcast = async () => {
  // // await leaveChannel();
  // await stopMic();
  // await stopSystemAudio();
  // await leave();
  await endLive();
};
</script>
<style lang="scss" scoped>
.live-box {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;

  .header {
    display: flex;
    width: 100%;
    min-height: 62px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    .anchor {
      display: flex;
      gap: 8px;

      .avator {
        width: 60px;
        height: 60px;
        background-image: url("@/assets/live/headPportrait.jpg");
        background-size: 100% 100%;
        border-radius: 10px;
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .tag {
          width: 70px;
          height: 20px;
          background-image: url("@/assets/live/chenghao.png");
          background-size: 100% 100%;
        }
      }
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .value {
        font-size: 24px;
      }

      .label {
        font-size: 12px;
      }
    }

    .btn {
      padding: 10px 18px;
      background: #165dff;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
    }

    .fun_btn {
      display: flex;

      .btn:last-child {
        margin-left: 16px;
      }
    }
  }

  .middle {
    display: flex;
    margin-top: 20px;

    .tag-bar {
      background: linear-gradient(to left, #3b53ff 0%, rgba(59, 83, 255, 0) 100%);
      border-radius: 243px;
      min-width: 355px;
      padding: 4px;
      padding-right: 15px;
      font-style: italic;
      font-size: 15px;
      display: flex;
      line-height: 26px;

      .tag {
        width: 73px;
        height: 26px;
        // background-color: orange;
        background-image: url("@/assets/live/xiaosheng.png");
        background-size: 100% 100%;
        margin-right: 5px;
      }

      .gradient {
        background: linear-gradient(300.63161481410884deg,
            #f18c22 0%,
            #fce8ab 53%,
            #f18c22 82%,
            #fce8ab 100%);
        color: transparent;
        background-clip: text;
      }
    }

    .btns {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 13px;
      padding-right: 22px;
      cursor: default;

      .btn {
        padding: 6px 8px;
        background: linear-gradient(52deg, #7774fd 0%, #ff7281 100%);
        border-radius: 46px 46px 46px 46px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 10px;
        cursor: pointer;
      }

      .item {
        width: 19px;
        height: 19px;
      }

      .cursor_btn {
        cursor: pointer;
      }
    }
  }

  .footer {
    flex: 1;
    display: flex;
    gap: 40px 72px;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 33px;
    // width: 60%;
    // min-width: 798px;
    min-height: 250px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;

    .item {
      .icon {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .label {
        background: rgba(255, 255, 255, 0.15);
        height: 26px;
        line-height: 26px;
        margin-top: 4px;
        border-radius: 104px;
        text-align: center;
      }
    }
  }

  .footer-zero {
    display: flex;
    align-items: center;
    justify-content: center;

    .anchor {
      .icon {
        width: 104px;
        height: 104px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .label {
        height: 26px;
        line-height: 26px;
        margin-top: 14px;
        border-radius: 104px;
        text-align: center;
      }
    }
  }

  .footer-eight {
    width: 522px;
    // gap: 40px 73px;
  }

  .footer-twelve {
    // gap: 40px 73px;
    width: 798px;
  }

  .collect_packet {
    margin-top: 10px;
    cursor: pointer;

    img {
      width: 25px;
      height: 32px;
    }
  }
}

.more-box {
  color: #fff !important;
  font-size: 10px;
  cursor: default;

  li {
    margin: 4px 0;
  }
}
</style>
